<template>
	<div>
		<nav class="navContainer">
			<van-icon name="arrow-left"  color="white" @click="back"/>
		</nav>
		<van-image
		id="resImg"
		  width="100"
		  height="100"
		  :src="$store.state.currentRes.restaurant.image_path | iconFilter"
		/>
		
		<div class="header">
			<van-row type="flex" justify="center">
			  <van-col span="18"><h3  class="ellipsis resName">{{$store.state.currentRes.restaurant.name}}</h3></van-col>
			</van-row>
			<div class="needTime">
				<span class="after_space">评价{{$store.state.currentRes.restaurant.rating}}</span>
				<span class="after_space">月售{{$store.state.currentRes.restaurant.recent_order_num}}</span>
				<span class="after_space">蜂鸟快递约{{$store.state.currentRes.restaurant.order_lead_time}}分钟</span>
			</div>
			<van-row type="flex" justify="center">
			  <van-col span="14">
				   <span class="activties " v-for="(active , i ) in $store.state.currentRes.restaurant.activities[0].description.split('，')">{{active}}</span>&nbsp;
				  <!-- <span class="activties " v-for="(active , i ) in $store.state.currentRes.restaurant.activities">{{active.description}}</span>&nbsp; -->
				 
			  </van-col>
			  <van-col span="4" style="color: #999;font-size: .7rem;">
				  6个优惠<van-icon class="moreActive" name="play" />
			  </van-col>
			  
			</van-row>
			<van-row type="flex" justify="center">
				<van-col span="18" class="ellipsis description">{{ $store.state.currentRes.restaurant.description }}</van-col>
			</van-row>
		</div>
		<van-tabs v-model="activeName" color="#2395FF" >
		  <van-tab title="点餐" name="order" >点餐</van-tab>
		  <van-tab title="评价" name="evaluate">
			  <evaluate :resId="$store.state.currentRes.restaurant.id"></evaluate>
			  
		  </van-tab>
		  <van-tab title="商家" name="business">商家</van-tab>
		</van-tabs>
		<!-- 评价请求 -->
		<!-- https://h5.ele.me/pizza/ugc/restaurants/E4606401533846994478/batch_comments?has_content=true&offset=0&limit=20 -->
		
	</div>
</template>

<script>
	import evaluate from '../components/evaluate.vue'
	export default{
		mounted() {
			console.log(this.$store.state.currentRes);
		},
		components:{
			evaluate
		},
		data(){
			return {
				activeName:""
			}
		},
		methods:{
			back(){
				this.$router.back()
			}
		}
	}
</script>

<style>
	.navContainer{
		background-image: url(../assets/images/2.jpeg);
		height: 100px;
		padding: 10px 10px 0 10px;
	}
	#resImg{
		position: absolute;
		transform: translate(-50%,0);
		left: 50%;
		top: 25px;
	}
	.header{
		text-align: center;
		padding: 25px 0 0 0 ;
	}
	.ellipsis{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

	}
	.van-icon, .van-icon::before{
		margin: auto 0;
	}
	.resName{
		
	}
	.needTime{
		padding: 10px;
		margin: 0 auto;
		text-align:center;
		font-size: .7rem;
		color: #666;
	}
	.after_space:after{
		content: "" ;
		display: inline-block;
		width: 10px;
	}
	.activties{
	    color: rgb(255, 75, 51);
	    border: 1px solid rgb(255, 201, 193);
		padding: .266667vw 1.066667vw;
		font-size: .6rem;
		background-color: #fff;
		display: inline-block;
	}
	.moreActive{
		transform: rotate(90deg);
	}
	.description{
		margin-top:5px ;
		font-size: .7rem;
		color: #666;
		
	}
</style>
